<template>
  <!--导航条-->
  <div>
    <el-menu :default-active="activeIndex" style="width: 100%;box-sizing: border-box" class="el-menu-demo" mode="horizontal" @select="handleSelect">
        <el-menu-item style="margin:0 100px">
          <span style="color: #f1da7f;font-size: 24px;font-family: '微软雅黑 Light';font-weight: bolder">星愿论坛</span>
        </el-menu-item>
        <el-menu-item index="1" style="margin:0 0px" @click="toHome">首页</el-menu-item>
        <el-submenu v-for="(b,index) in boardList" :index="index+2+''" style="margin:0 10px">
          <template slot="title">{{b.name}}</template>
          <el-menu-item v-for="c in b.categories" :index="2+'-'+c.id">{{c.name}}</el-menu-item>
        </el-submenu>

        <el-menu-item index="100" @click="toAdviceCenter">公告中心</el-menu-item>

      <!--搜索框-->
        <div style="width: 300px;float:left;margin-left:300px;height: 58px;line-height: 58px;box-sizing: border-box;padding-top: 10px">
          <el-form :inline="true" :model="searchForm" class="demo-form-inline" >
            <el-form-item>
              <el-input v-model="searchForm.title" placeholder="在此输入文章名"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" class="el-icon-search" @click="searchArticle()"></el-button>
            </el-form-item>
          </el-form>
        </div>



      <div style="width: 150px;float:left;margin-left:120px;height: 58px;line-height: 58px;box-sizing: border-box" v-if="!userInfo">
        <el-link type="success" href="/login"><span class="login_reg">登录</span></el-link>
        <el-link type="success" href="/register" style="margin-left: 30px"><span class="login_reg">注册</span></el-link>
      </div>
      <div style="width: 60px;float:left;height: 58px;line-height: 58px;box-sizing: border-box;padding-top: 10px" v-if="userInfo">
        <img :src="imageUrl+userInfo.avatar" alt="" style="width: 44px;height: 44px;border-radius: 50%" v-if="userInfo">
      </div>
      <div style="width: 160px;float:left;height: 58px;line-height: 58px;box-sizing: border-box;" v-if="userInfo">
          <span style="color: red;font-size: 18px">{{userInfo.nickname}}</span>
      </div>
      <div style="width: 200px;float:left;height: 58px;line-height: 58px;box-sizing: border-box;" v-if="userInfo">
        <el-link type="success" href="/personalCenter" style="margin-left: 20px"><span style="color: #5bc65b;font-size: 16px">个人中心</span></el-link>
        <el-link type="success" @click="logout" style="margin-left: 20px"><span style="color: #5bc65b;font-size: 16px">退出登录</span></el-link>
      </div>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: "HeaderTop",
  props:["activeIndex"],
  data(){
    return{
      imageUrl:this.$Myurl.userImageUrl,
      userInfo:JSON.parse(sessionStorage.getItem("userInfo")),
      // myActiveIndex: ,
      searchForm:{
        title:''
      },
      loginUser:{

      },
      boardList:[],
    }
  },
  methods:{
    searchArticle(){
      this.$parent.initArticles(4,this.searchForm.title);
    },
    toHome(){
      this.$router.push('/')
      this.$parent.initArticles(1);
    },
    logout(){
      //向后台发送一次请求，用于记录退出登录操作
      sessionStorage.clear();
      this.$router.push('/')
      this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'));
      let url  = "user/loginOut";
      this.$axios.get(url);
    },
    toAdviceCenter(){
      this.$router.push('/adviceCenter')
    },
    handleSelect(key,keypath){
      console.log(key,keypath)
      console.log('id'+key.substring(key.lastIndexOf('-')+1))
      let cid = key.substring(key.lastIndexOf('-')+1)
      this.$parent.initArticles(5,null,cid);
    },
    getBoardList(){
      let url = 'board/getBoardAndCategory'
      this.$axios.get(url)
          .then(res=>{
            this.boardList = res.data.data;
            console.log(this.boardList);
          })
    },

  },
  created() {
    this.getBoardList();
  }
}
</script>

<style scoped>
.login_reg {
  color: #f1da7f;
  font-size: 18px;

}
.login_reg:hover{
  color: #5bc65b;
}

</style>